<template>
	<view class="wrap">
		<view class="u-tabs-box">
			<myTabsSwiper :activeColor="activeColor" ref="tabs" :list="tabList" :current="current" @change="change"
				:is-scroll="false" swiperWidth="750" :bar-width='barWidth'>
			</myTabsSwiper>
		</view>

		<swiper class="swiper-box" :current="Curs" @transition="transition" @animationfinish="animationfinish">
			<swiper-item class="swiper-item" v-for="(item,index) in tabList" :key="index">
				<scroll-view scroll-y class="h100p w100p" v-if="item.show">
					<view class="page-box">
						<slot :name="item.slot">
						</slot>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>

		<slot name="flowButton"></slot>
	</view>
</template>

<script>
	import myTabsSwiper from "../myTabsSwiper/myTabsSwiper.vue";
	export default {
		components: {
			myTabsSwiper
		},
		props: {
			list: {
				type: Array,
				default: () => []
			},
			showSwiper:{
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
				current: 0,
				Curs: 0,
				activeColor: this.$gl.activeColor,
				barWidth: this.$gl.barWidth,
				tabList: [],
				Swiper:this.showSwiper
			};
		},
		mounted() {
			this.tabList = this.list;
			//父组件改变子组件的传值
			this.changeTabs();
		},
		methods: {
			changeTabs() {
				this.tabList = this.tabList.filter(item => item.show == true)
			},
			change(index) {
				this.Curs = index;
			},
			transition({
				detail: {
					dx
				}
			}) {
				this.$refs.tabs.setDx(dx);
			},
			animationfinish({
				detail: {
					current
				}
			}) {
				this.$refs.tabs.setFinishCurrent(current);
				this.Curs = current;
				this.current = current;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--window-top));
		width: 100%;
	}

	.page-box {
		padding: 10px;
		padding-bottom: 50px;
	}

	.swiper-box {
		flex: 1;
	}

	.swiper-item {
		height: 100%;
	}



	/deep/ .u-cell__value {
		text-align: right;
		margin-left: 30px;
	}

	/deep/ .u-cell__value span {
		text-align: left;
		display: inline-block;
	}

	/deep/ .u-cell__title-text {
		min-width: 100px;
	}
</style>
